<template>
	<view class="page">
		<view class="i-pb">
			<view class="invite-content">
				<view class="i-rule">
					<view>每邀请一位新用户下单，你可得一张优惠券</view>
				</view>

				<view class="i-ewm">
					<view class="i-img">
						<image :src="miniewm"></image>
					</view>
					<!-- <view class="invite-code">
						<view class="i-code">
							<text style="color: #909399;">邀请码</text>
							<text style="margin-left: 20rpx;color: #ac4040;">XXXXXXXXXX</text>
						</view>
						<view class="i-btn">复制</view>

					</view> -->
				</view>

				<view class="x-share">
					<view class="x-sf"><button class="sharebtn" open-type="share">分享好友</button></view>
					<view class="x-save" @click="saveImg()">保存图片</view>
				</view>

				<view class="invite-list">
					<view class="b-flex">
						<view style="height: 60rpx;margin: 0 auto;background-color: #ffffff;border-radius: 10rpx;">
							<view class="x-title">邀请记录</view>
							<view class="x-line"></view>
						</view>
					</view>
					<view>
						<view class="x-th b-flex">
							<view>头像</view>
							<view>好友姓名</view>
							<view>手机号</view>
							<view>奖励</view>
						</view>
						<u-line :hairline="false" length="90%" margin="0 auto"></u-line>
						
							<view v-if="inviteList.length == 0" style="margin: 30rpx auto;display: flex;font-size: 28rpx;color: #bfbdbd;justify-content: center;">数据为空</view>
						<view class="x-td b-flex" v-for="(item, index) in inviteList" :key="index" :data-id="index">
							<view class="x-item">
								<view>
									<image :src="item.headImgUrl">
									</image>
								</view>
								<view>{{item.nickname}}</view>
								<view>{{item.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</view>
								<view>{{item.effect==0?'在路上':'已到账'}}</view>
							</view>
						</view>

						<!-- <view class="x-td b-flex">
							<view class="x-item">
								<view>
									<image src="https://beluga-s3.oss-cn-hangzhou.aliyuncs.com/isanlife/logo.jpg">
									</image>
								</view>
								<view>花*熊</view>
								<view>123****8911</view>
								<view>在路上</view>
							</view>
						</view> -->


					</view>




				</view>

				<view style="height: 50rpx;"></view>

			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				miniewm: "",
				inviteList:[]


			};
		},
		onLoad: function() {
			this.getewm();
			this.getInviteList();
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})

		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
				return {
					title: '新动力生活方式',
					path: '/pages/index/index?scene=userid=123'
				}

			}
			if (res.from === 'menu') {
				return {
					title: '新动力生活方式',
					path: '/pages/index/index?scene=userid=123',
					imageUrl: imageUrl
				};
			}

		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '新动力生活方式',
				path: '/pages/index/index?scene=userid=123',
				imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
			};
		},
		methods: {
			getInviteList(){
			this.$Request.get(this.$api.invite.getMyInviteList).then(res => {
				if (res.code === 20000) {
					this.inviteList = res.data;
					console.log('inviteList',this.inviteList)
					console.log(this.inviteList.length)
				}
			})
					
				
			},
			getewm() {
				this.$Request.get(this.$api.invite.getInviteCode).then(res => {
					if (res.code === 20000) {
						this.miniewm = "data:image/png;base64," + res.message;
					}
				})

			},
			saveImg() {
				uni.getSetting({ //获取用户的当前设置
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum();
						} else {
							uni.authorize({ //如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum();
								},
								fail: () => {
									uni.showToast({
										title: "请打开保存相册权限，再点击保存相册",
										icon: "none",
										duration: 3000
									});
									setTimeout(() => {
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: (res2) => {
												// console.log(res2.authSetting)
											}
										});
									}, 3000);
								}
							})
						}
					}
				})
			},
			saveImageToPhotosAlbum() {
				let base64 = this.miniewm.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
				let filePath = wx.env.USER_DATA_PATH + '/xdl_qrcode.png';
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				uni.getFileSystemManager().writeFile({
					filePath: filePath, //创建一个临时文件名
					data: base64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success: function(res2) {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功，请从相册选择再分享',
									icon: "none",
									duration: 5000
								})
							},
							fail: function(err) {
								uni.hideLoading();
								// console.log(err.errMsg);
							}
						})
					},
					fail: err => {
						uni.hideLoading();
						//console.log(err)
					}
				})
			}




		}
	}
</script>

<style lang="scss">
	.sharebtn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 180rpx;
		height: 65rpx;
		border-radius: 40rpx;
		width: 180rpx;
		font-size: 30rpx;
		background-color: #ffffff;
		color: #F45648;
	}


	.i-pb {
		background-image: url('https://beluga-s3.oss-cn-hangzhou.aliyuncs.com/xdl-bucket/yqing.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin: 0;
		padding: 0;
	}

	.invite-content {
		height: 100%;
	}

	.i-rule {
		display: flex;
		justify-content: center;
		padding-top: 300rpx;
		font-size: 25rpx;

		view {
			border-radius: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 520rpx;
			background-color: rgba(255, 255, 255, 0.8);
		}
	}

	.i-ewm {
		background-image: url('https://beluga-s3.oss-cn-hangzhou.aliyuncs.com/xdl-bucket/yqing-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 700rpx;
		margin: 20rpx 20rpx;

		.i-img {
			display: flex;

			image {
				margin: 0 auto;
				margin-top: 70rpx;
				display: flex;
				height: 300rpx;
				width: 300rpx;
			}
		}

		.invite-code {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 30rpx;

			.i-code {
				font-size: 30rpx;
				font-weight: bold;
			}

			.i-btn {
				font-size: 25rpx;
				display: flex;
				align-items: center;
				color: $xdl-color-primary;
				margin: 0 30rpx;
				border: 1rpx solid $xdl-color-primary;
				width: 80rpx;
				justify-content: center;
				border-radius: 20rpx;
			}
		}

	}

	.x-share {
		display: flex;
		justify-content: center;
		color: #F45648;
		font-weight: bold;
		font-size: 30rpx;
		margin: 40rpx;

		view {
			height: 65rpx;
			width: 180rpx;
			margin: 0 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 30rpx;
			background-color: #ffffff;
		}
	}


	.invite-list {
		margin: 0 20rpx;
		background-color: #fff9f2;
		border-radius: 10rpx;
		height: 350rpx;

		view {
			width: 100%;

			view {
				.x-title {
					font-size: 35rpx;
					font-weight: bold;
					text-align: center;
					margin: 0 auto;
				}

				.x-line {
					width: 180rpx;
					height: 15rpx;
					background-color: #FCC430;
					border-radius: 10rpx;
					margin: 0 auto;
					margin-top: -20rpx;
				}
			}


			.x-th {
				color: #909399;
				margin: 30rpx 0rpx 10rpx 0rpx;
				font-size: 25rpx;
				width: 100%;
				font-weight: bold;

				view {
					display: flex;
					justify-content: center;
					width: 30%;
				}

			}

			.x-td {
				color: #909399;
				margin: 10rpx 0rpx;
				font-size: 25rpx;
				width: 100%;

				.x-item {
					display: flex;
					height: 60rpx;

					view {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 30%;

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}
				}

			}

		}

	}
</style>
